JavaScript JS利用location对象获取页面url、服务器地址、端口号、项目根路径和查询参数 |
您所在的位置：网站首页 › js url参数拼接 解析 › JavaScript JS利用location对象获取页面url、服务器地址、端口号、项目根路径和查询参数 |
|
本文讲述JavaScript简称JS如何利用location对象获取页面url地址(href)，服务器地址(hostname)，服务器端口号(port)，context path，项目部署路径或项目根路径及url查询参数解析。 以Java web项目部署在tomcat为例，项目（mco-saaserp）部署完成后，根据服务器配置参数不同，项目访问方式有2种： 1）context path=“/”，可通过服务器+端口号直接访问； 如：http://localhost:8081/views/site/login.html 如果是80端口，则端口号可以省略，如：http://localhost/views/site/login.html location对象输出如下： Location http://localhost:8081/views/site/login.html host: "localhost:8081" hostname: "localhost" href: "http://localhost:8081/views/site/login.html" origin: "http://localhost:8081" pathname: "/views/site/login.html" port: "8081" protocol: "http:" search: ""2）context path="/mco-saaserp"，可通过服务器+ context path+端口号访问； 如：http://localhost:8081/mco-saaserp/views/site/login.html 同理，如果80端口，端口号可以省略。 location对象输出如下： Location http://localhost:8081/mco-saaserp/views/site/login.html host: "localhost:8081" hostname: "localhost" href: "http://localhost:8081/mco-saaserp/views/site/login.html" origin: "http://localhost:8081" pathname: "/mco-saaserp/views/site/login.html" port: "8081" protocol: "http:" search: "" 1、项目根路径获取在实际项目中，经常需要动态指定url，如：ajax请求url，页面跳转url，常见处理方式为： // 目标url = base_url + (请求或页面path，如：/views/site/login.html, /sybase/login.do等） // context-path = "/" var base_url = "http://localhost:8081/"; // context-path = "/mco-saaserp" // var base_url = http://localhost:8081/mco-saaserp/ function toUrl(path) { return base_url + path; } console.log(toUrl("/sybase/login.do")); //http://localhost:8081/sybase/login.do该方式存在2个问题： 服务器与本地context-path不一致时，发布到服务器时，需要修改服务器文件js代码；团队开发情况下，团队成员可能需要修改js代码，设置正确的base_url方可工作，如： 成员1：设置base_url=http://localhost:8081/ 成员2：设置base_url=http://localhost:8082/ 成员3：设置base_url=http://localhost:8083/mco-saaserp/幸运的是，由于项目的context-path基本上是确定的，不是"/“就是“/mco-saaserp”，因此我们可以通过location.href中是否可以查找到”/mco-saaserp"来判断context-path是哪种情况，从而得出项目根路径，代码如下： function getBaseUrl(context) { var location = window.document.location; var pagePath = location.pathname; //mco-saaserp/views/site/login.html context = context || ""; if (context != "") { var pos = pagePath.indexOf("/" + context); context = pos > -1 ? context : ""; } return location.protocol + "//" + location.host + "/" + context; } var base_url = getBaseUrl('mco-saaserp') // 若context-path = /, 则base_url=http://localhost:8081/ // 若context-path = /mco-saaserp, 则base_url=http://localhost:8081/mco-saaserp／ 2、url参数解析url路径?=后面的谓之url参数，比如： https://www.baidu.com/baidu?tn=monline_3_dg&ie=utf-8&wd=js+获取项目地址 console.log(location.search); //?tn=monline_3_dg&ie=utf-8&wd=js+获取项目地址则tn=monline_3_dg&ie=utf-8&wd=js+获取项目地址就是查询字符串，对应location.search，因此解析url参数，就是解析"?tn=monline_3_dg&ie=utf-8&wd=js+获取项目地址"字符串，代码如下： function getParam() { var _url = null, name = null; if(arguments.length == 0) return null; if(arguments.length == 1) { _url = window.document.location.href, name = arguments[0]; } else if(arguments.length == 2){ _url = arguments[0], name = arguments[1]; } else { return null; } if(_url.indexOf("?")>=0) _url = _url.substr(_url.indexOf("?") + 1); var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个正则表达式 var r = _url.match(reg); //匹配目标参数 if (r != null) return decodeURIComponent(r[2]); return null; //返回参数值 } getParam("https://www.baidu.com/baidu?tn=monline_3", "tn"); //monline_3 //假设url: http://localhost:8081/views/site/login.html?timestamp=11212121212 getParam("timestamp"); //11212121212说明： 1）getParam函数考虑到可以提取给定url参数，查询字符串通过截取url ?开始的字符串获取； 2）注意中文字符乱码问题。 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |